<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="../../WebDemo/CSS/button_Submit_Reset.css"rel="stylesheet" />
		<title>1-分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- score=90时 显示良好 -->
			<h3>评级</h3>
			<input type="number" v-model="score" />
			<div v-if="score>90&&score<=100">优秀</div>
			<div v-else-if="score>80&&score<=90">良好</div>
			<div v-else-if="score>70&&score<=80">中等</div>
			<div v-else-if="score>=60&&score<=70">及格</div>
			<div v-else>不及格</div>
			
			<h3>评级</h3>
			<input type="number"v-model="score1" />
			<div v-if="score1>90&&score1<=100">优秀</div>
			<div v-else-if="score1>80&&score1<=90">良好</div>
			<div v-else-if="score1>70&&score1<=80">中等</div>
			<div v-else-if="score1>=60&&score1<=70">及格</div>
			<div v-else-if="score1>=0&&score1<60">不及格</div>
			
			<h3>评级</h3>
			<input type="number"v-model="score2" />
			<div v-if="score2>90&&score2<=100">优秀</div>
			<div v-else-if="score2>80&&score2<=90">良好</div>
			<div v-else-if="score2>70&&score2<=80">中等</div>
			<div v-else-if="score2>=60&&score2<=70">及格</div>
			<div v-else-if="score2>=0&&score2<60">不及格</div>	
			
			<h3>评级</h3>
			<input type="number"v-model="score3" />
			<div v-if="score3>90&&score3<=100">优秀</div>
			<div v-else-if="score3>80&&score3<=90">良好</div>
			<div v-else-if="score3>70&&score3<=80">中等</div>
			<div v-else-if="score3>=60&&score3<=70">及格</div>
			<div v-else-if="score3>=0&&score3<60">不及格</div>
			
			
			
		</div>

		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				//不要忘记# .等符号
				el: '#app',
				data: {
					score:90,
					score1:90,
					score2:90,
					score3:90

				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>
